import React from "react";
import { Button } from "antd";
import { withRouter } from "react-router-dom";

const Header = props => {
  const { history } = props;
  const handleLinkClick = ev => {
    const href = ev.target.getAttribute("to");
    if (href) {
      history.push(href);
    }
  };
  return (
    <nav className="nav-bar">
      <Button onClick={handleLinkClick} to="/" type="link" size="large" ghost>
        首页
      </Button>
      <Button
        onClick={handleLinkClick}
        to="/bill"
        type="link"
        size="large"
        ghost
      >
        账单
      </Button>
      <Button
        onClick={handleLinkClick}
        to="/login"
        type="link"
        size="large"
        ghost
      >
        登录
      </Button>
      <Button
        onClick={handleLinkClick}
        to="/register"
        type="link"
        size="large"
        ghost
      >
        注册
      </Button>
    </nav>
  );
};

export default withRouter(Header);
